<template>
	<u-popup :show="isOpen" :round="10">
		<view class="">
			<view class="w-100 flex justify-center p-20 position-r">
				<text class="c-333 font-16 w-600">资产选择</text>
				<u-icon class="coupon-close" name="close" size="24" mode="aspectFit" @tap="handleCloseSubmit"></u-icon>
			</view>
      		<view class="position-r border-box p-l-20 p-r-20 m-t-30 m-b-120">
				<view v-show="selectBox" class="position-a selectBox b-r-10 font-14 p-t-10 p-b-10">
					<view @tap="selectAssets(item)" v-for="(item,index) in assetsList" :key="index">{{ item.assetsName }}</view>
				</view>
				<view class="flex m-t-30 p-t-10 p-b-10">
					<view class="font-15" style="min-width:130rpx">资产类型:</view>
					<view class="boxss p-l-20 p-r-20 p-t-10 p-b-10 b-r-10 flex justify-between" @tap="selectBox = !selectBox">
						{{assetsName}}
						<u-icon class="m-l-20" name="arrow-down" color="#b3b3b3"></u-icon>
					</view>
				</view>
				<view class="flex m-t-20" v-if="percent && percent.length > 0">
					<view class="font-15 color-r">抵扣金额：¥{{ total }}
						<text>（抵扣个数{{ assetsAmount }}）</text>
					</view>
				</view>
				<view class="flex m-t-20">
					<view class="font-15">资产总价值：
						<text class="color-r">¥{{ totalAssets }}</text><br />(资产个数
						<text class="color-r">{{this.clickType.exchangeNum || 0}}</text>，今日最低价￥
						<text class="color-r">{{this.clickType.assetsAvgPrice || 0}}</text>)
					</view>
				</view>
				<view class="m-t-20">
					<view class="flex justify-between">
						<view class="flex font-b">
							<view class="line-h-80 font-15 color-b">抵扣商品总价</view>
							<view class="line-h-80 m-l-10 font-12 color-g">(最高可抵扣100%)</view>
						</view>
						<view class="m-t-10">
							<numberStep :percentNum="percentNum" :maxPercent="maxPercent" @numChange="percentChange" />
						</view>
					</view>
					<view class="m-t-20">
						<view class="color-r font-14"> 总抵扣：￥{{ totalDeduction || 0 }} (抵扣个数 {{ assetsAmount }} ) </view>
						<view class="color-r font-14 m-t-20"> 
							<view class="color-g font-14 m-t-20">商品抵扣金额：￥{{ total || 0 }}</view>
							<view class="color-g font-14 m-t-20">手续费：￥{{ serviceCharge || 0 }}</view>
						</view>
					</view>
					<view class="w-100" style="height: 140rpx;"></view>
				</view>
      		</view>
			<view class="btn-box flex justify-center bg-red1 m-t-20" @tap="handleSubmit">
				<text class="w-500 font-14 color-w">确定</text>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {customerAssets,getServiceCharge}  from '@/common/api/customer.js';
	import numberStep from './number-step.vue';
	export default {
		components:{
			numberStep
		},
		props: {
		showPop:{
			type: Boolean,
			default: false
		},
		totalPrice:{}
		},
		data() {
			return {
				isOpen: false,
				selectBox:false,//下拉框
				assetsName:'资产类型',//
				total: 0,//抵扣金额
				assetsAmount:0,//抵扣个数
				percent: '',//百分比
				assetsList:[],//资产列表
				clickType:{},//点击的资产类型
				totalAssets: null,//总资产金额
				totalBool: false,//是否展示全部抵扣
				totalPercent: null,//全部抵扣的百分比
				percentNum: 0,//当前百分比（上次点击确认的百分比）
				maxPercent: 0,//最大抵扣百分比
				serviceCharge: 0,//手续费
				serviceChargeNum: 0,//手续费百分比
				totalDeduction: 0,//资产总抵扣金额（商品抵扣金额+手续费金额）
			}
		},
		watch: {
			// 弹窗Bool
			showPop:{
				handler(newVal,oldVal){
					if(newVal){
						this.isOpen = newVal
						let chooeseAssets = uni.getStorageSync('chooeseAssets')
						if(chooeseAssets && chooeseAssets.assetsId){
							let assets = this.assetsList.filter(item=>item.assetsId == chooeseAssets.assetsId)
							this.selectAssets(assets[0])
							setTimeout(()=>{
								this.percentNum = chooeseAssets.percentNum;
								this.totalDeduction = chooeseAssets.total;
								this.maxPercent = chooeseAssets.maxPercent;
								this.serviceCharge = chooeseAssets.serviceCharge;
								this.total = chooeseAssets.totalPrice;
								this.assetsAmount = chooeseAssets.assetsAmount;
								this.percent = Number(chooeseAssets.percent);
							},200)
						}else{
							this.selectAssets(this.assetsList[0])
							setTimeout(()=>{
								this.totalDeduction = 0;
								this.serviceCharge = 0;
								this.total = 0;
								this.assetsAmount = 0;
							},200)
						}
					}
				},
				deep:true,
				immediate:true
			},
			// 点击的百分比
			percent:{
				handler(newVal,oldVal){
					if(newVal || newVal == 0){
						// console.log(newVal,"百分比")
						this.calcAmount()
					}
				}
			},
			// 点击的资产
			clickType:{
				handler(newVal,oldVal){
					if(newVal){
						// console.log(newVal,"资产")
						this.calcAmount()
					}
				}
			}
		},
		created(opt) {
			this.getAssets()
			this.getPercentNum()
		},
		methods: {
			// 获取手续费百分比
			getPercentNum(){
				getServiceCharge().then(res => {
					if(res.code === 200){
						this.serviceChargeNum = Number(res.msg)*100
					}
				})
			},
			// 资产下拉列表
			getAssets(){
				customerAssets().then(res => {
					if(res.code == 200){
						this.assetsList = res.data;
						if( res.data.length > 0 ){
							this.selectAssets(res.data[0])
						}
					}
				})
			},
			// 切换抵扣百分比
			percentChange(e){
				this.percentNum = e
				let num;
				if(e === 0){
					num = 0
				}else if(e === 5){
					num = 0.05
				}else if(e === 10){
					num = 0.1
				}else if(e === 15){
					num = 0.15
				}else if(e === 20){
					num = 0.2
				}else if(e === 100){
					num = 1
				}
				this.percent = num;
			},
			// 计算抵扣个数
			calcAmount(){

				let serviceChargePercent = parseFloat(this.serviceChargeNum) / 100 //手续费百分比
				let total = parseFloat(this.totalPrice);// 商品总价
				let percent = parseFloat(this.percent);// 选择百分比
				let assetsAvgPrice = parseFloat(this.clickType.assetsAvgPrice); // 资产单价

				if(this.clickType.assetsAvgPrice && this.percent && this.percent != '9999999999'){//根据选了百分比进行资产抵扣
					let amount = Math.ceil( ((total * percent)+(total*percent*serviceChargePercent)) / assetsAvgPrice ); // 抵扣资产个数(向上取整)
					if( amount == 0 && percent > 0 ){
                		this.$msg('金额过小无法使用资产抵扣 !')
						this.percent = null;
						this.total = 0;//商品抵扣金额
						this.totalDeduction = 0;//总抵扣金额(抵扣商品金额+手续费金额)
						this.serviceCharge = 0;//手续费金额
						this.maxPercent = Number((this.totalAssets / total * 100).toFixed(3));//实时计算用户最大抵扣百分比
						return
					}else if( amount > this.clickType.exchangeNum){
                		this.$msg('资产不足 !')
						this.percent = null;
						this.total = 0;//商品抵扣金额
						this.totalDeduction = 0;//总抵扣金额(抵扣商品金额+手续费金额)
						this.serviceCharge = 0;//手续费金额
						this.goodsPrice = 0;//商品抵扣金额
						this.maxPercent = Number((this.totalAssets / total * 100).toFixed(3));//实时计算用户最大抵扣百分比
						return
					}else{
						this.assetsAmount =  amount;
						this.total = (Number(total)*this.percent).toFixed(2)//商品抵扣金额
						this.serviceCharge = Number(total*percent*serviceChargePercent).toFixed(2);//手续费金额
						this.totalDeduction = (Number(total*percent*serviceChargePercent) + Number(this.total)).toFixed(2);//总抵扣金额(抵扣商品金额+手续费金额)
						this.maxPercent = Number((this.totalAssets / (total+total*serviceChargePercent) * 100).toFixed(3));//实时计算用户最大抵扣百分比
					}
				}else if(this.percent == 0){//如果选了 percent = 0
					this.assetsAmount =  0;
					this.total = 0;//商品抵扣金额
					this.totalDeduction = 0;//总抵扣金额(抵扣商品金额+手续费金额)
					this.serviceCharge = 0;//手续费金额
					this.maxPercent = Number((this.totalAssets / total * 100).toFixed(3));//实时计算用户最大抵扣百分比
				}
			},
			// 关闭选择资产
			handleCloseSubmit(){
				let parmas = {
					secondPayId: 21, 
					assetsId: null,
					assetsAmount: 0,
					total: 0,
					assetsName: null,
					percent: 0,
					maxPercent : 0,
					serviceCharge : 0,
					totalPrice : 0,
					percentNum : 0
				}
				// 缓存所选的
				uni.setStorageSync('chooeseAssets',parmas)
				this.$emit('chooeseAssets', parmas)
				this.isOpen = false
			},
			// 确认选择资产
			handleSubmit() {
				let parmas = {
					secondPayId: 21, 
					assetsId: this.clickType.assetsId || null, //资产id
					assetsAmount: this.assetsAmount  || 0,//资产个数
					total: this.totalDeduction || 0,// 总抵扣金额(商品抵扣金额+手续费)
					assetsName: this.assetsName == '资产类型' ? null : this.assetsName, // 资产名称
					percent: this.percent || Number(parseFloat(this.percentNum) / 100).toFixed(4),//为了再次点进来回显上一次的数据
					maxPercent : this.maxPercent,//用户选择的最大抵扣百分比 为了再次点进来回显上一次的数据
					serviceCharge : this.serviceCharge,//手续费  为了再次点进来回显上一次的数据
					totalPrice : this.total,//商品抵扣金额 为了再次点进来回显上一次的数据
					percentNum : this.percentNum
				}
				if(parmas.total+'' == 'NaN'){
					parmas.total = 0
				}
				// 缓存所选的
				uni.setStorageSync('chooeseAssets',parmas)
				this.$emit('chooeseAssets', parmas)
				this.isOpen = false
			},
			// 点击资产
			selectAssets(data){
				this.clickType = data;
				this.assetsName = data.assetsName;
				this.selectBox = false;
				// 资产总价值
				let total = parseFloat(this.totalPrice);//商品总价
				let assetsAmount =  parseFloat(data.exchangeNum || 0);
				let assetsAvgPrice =  parseFloat(data.assetsAvgPrice || 0);
				// 计算总资产
				if(assetsAmount == 0  || assetsAvgPrice == 0){
					this.totalAssets = 0;
				}else{
					this.totalAssets = parseFloat(assetsAmount * assetsAvgPrice).toFixed(3);
				}
				// 计算最大抵扣百分比---------
				this.percentNum = 0
				this.percent = 0
				this.maxPercent = Number((this.totalAssets / total * 100).toFixed(3));
				if(this.maxPercent > 100){
					this.maxPercent = 100
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-close {
		top: 24rpx;
		right: 24rpx;
		position: absolute;
	}

	.btn-box {
		line-height: 80rpx;
		border-radius: 40rpx;
		margin: 30rpx;
	}

	.selectBox{
		top: 80rpx;
		left: 166rpx;
		padding: 10rpx 20rpx;
		min-width: 300rpx;
		text-indent: 20rpx;
		line-height: 54rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 16rpx 0rpx rgba(0,0,0,0.18);
	}

	.radioBox{
		border-bottom: 2rpx solid #e9e9e9;
	}

	.boxss{
		margin-top: -10rpx;
		border: 2rpx solid red;
		min-width: 240rpx;
	}
	.m-b-120{
		margin-bottom: 120rpx;
	}
	::v-deep .u-checkbox-label--right{
		width: 100% !important;
	}
</style>
